<template>
  <div class="ldap-login">
    <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef">
      <el-form-item label="" prop="account">
        <el-input
          :maxlength="50"
          placeholder="请输入Ldap账号"
          prefix-icon="User"
          v-model="ruleForm.account"
        />
      </el-form-item>
      <el-form-item label="" prop="password">
        <el-input
          prefix-icon="Lock"
          type="password"
          show-password
          has-feedback
          allowClear
          :maxlength="50"
          placeholder="请输入Ldap登录密码"
          v-model="ruleForm.password"
        />
      </el-form-item>
      <el-form-item class="vericode" label="" prop="imgCode">
        <el-input
          :maxlength="5"
          placeholder="获取图形验证码"
          v-model="ruleForm.imgCode"
        />
        <el-button type="primary" class="captcha-sms" v-if="!isCaptcha" @click="getImgLoginCode">
          获取图形验证码
        </el-button>
        <span v-else>
            <img class="captcha" :src="captchaUrl" alt="" height="50px" />
            <a @click="getImgLoginCode" class="see-not-clear">
            看不清
            <br />
            换一张
            </a>
        </span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="button" :disabled="loading" class="login-btn" @click="onSubmit">
          {{
            loading ? '登录中...' : '登录'
          }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import useCommonLogin from '../hooks/useLogin'

export default defineComponent({
  name: 'ldapLoginPage',
  data() {
    return {}
  },
  setup() {
    const ruleForm = reactive<Record<string, any>>({
      account: '',
      password: '',
      imgCode: '',
    })
    const currentLoginWay = 'ldap'
    // 解构出通用状态和处理程序
    const {
      ruleFormRef,
      loading,
      captchaUrl,
      isCaptcha,
      // methods
      onSubmit, // 提交
      getImgLoginCode, // 获取图形验证码
    } = useCommonLogin(ruleForm, currentLoginWay)
    const rules = reactive<any>({
      account: [
        {
          required: true,
          trigger: 'blur',
          message: '请输入Ldap账号',
          // validator: onCheckAccount
        },
      ],
      password: [
        {
          required: true,
          trigger: 'blur',
          // validator: this.onCheckPassword // 临时放开限制
          message: '请输入Ldap密码',
        },
      ],
      imgCode: [
        {
          required: true,
          message: '请输入验证码',
          trigger: 'blur',
        },
      ],
    })
    // ------------------------ 方法 ------------------------
    return {
      ruleForm,
      rules,
      ruleFormRef,
      loading,
      captchaUrl,
      isCaptcha,
      // methods
      onSubmit,
      getImgLoginCode,
    }
  },
})
</script>

<style scoped lang="less">
@import "../style/common.less";
</style>
